import * as React from "react";
import {
  Switch,
  StyleSheet,
  View,
  ScrollView,
  Text,
  KeyboardAvoidingView,
  Platform
} from "react-native";
import { ListItem, Input, Avatar, Slider } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import { observer, inject } from "mobx-react";
import UserStore from "./Model/UserStore";

interface State {}

interface Props extends React.Props<any> {
  userStore: UserStore;
}

@inject("userStore")
@observer
export default class UserInfoDetail extends React.Component<Props, State> {
  static navigationOptions: any = {
    title: "用户中心"
  };

  _nickNameInput: any;
  _phoneInput: any;

  constructor(props: Props) {
    super(props);
  }

  render() {
    return (
      <KeyboardAvoidingView
        behavior="padding"
        style={{ backgroundColor: "transparent", flex: 1 }}
        keyboardVerticalOffset={Platform.OS === "ios" ? 65 : -1000}
      >
        <ScrollView style={styles.container}>
          <ListItem
            title="头像"
            titleStyle={styles.titleStyle}
            rightAvatar={
              <Avatar
                rounded
                source={{ uri: this.props.userStore.avatarUrl }}
                size={60}
              />
            }
            containerStyle={{ height: 80 }}
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="姓名"
            titleStyle={styles.titleStyle}
            rightTitle={this.props.userStore.name}
            containerStyle={styles.listItemStyle}
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="昵称"
            titleStyle={styles.titleStyle}
            rightElement={
              <Input
                ref={(ref: any) => {
                  this._nickNameInput = ref;
                }}
                containerStyle={{ width: 200, marginRight: -10 }}
                inputStyle={{ fontSize: 16, textAlign: "right", color: "#666" }}
                inputContainerStyle={{
                  borderBottomColor: "rgba(255, 255, 255, 0)"
                }}
                multiline={false}
                numberOfLines={1}
                autoFocus={false}
                editable
                rightIcon={
                  <Icon
                    name={"pencil"}
                    color="#DFEFDF"
                    size={20}
                    onPress={() => {
                      this._nickNameInput.focus();
                    }}
                  />
                }
                onChangeText={(text: string) => {
                  this.props.userStore.nickName = text;
                }}
                returnKeyType="done"
              >
                {this.props.userStore.nickName}
              </Input>
            }
            containerStyle={styles.listItemStyle}
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="公司名称"
            titleStyle={styles.titleStyle}
            rightTitle={this.props.userStore.company}
            containerStyle={styles.listItemStyle}
            rightTitleStyle={{ width: 200, marginRight: -10 }}
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="手机号"
            titleStyle={styles.titleStyle}
            rightElement={
              <Input
                ref={(ref: any) => {
                  this._phoneInput = ref;
                }}
                containerStyle={{ width: 200, marginRight: -10 }}
                inputStyle={{ fontSize: 16, textAlign: "right", color: "#666" }}
                inputContainerStyle={{
                  borderBottomColor: "rgba(255, 255, 255, 0)"
                }}
                multiline={false}
                numberOfLines={1}
                autoFocus={false}
                editable
                rightIcon={
                  <Icon
                    name={"pencil"}
                    color="#DFEFDF"
                    size={20}
                    onPress={() => {
                      this._phoneInput.focus();
                    }}
                  />
                }
                onChangeText={(text: string) => {
                  this.props.userStore.phone = text;
                }}
                returnKeyType="done"
                keyboardType="phone-pad"
              >
                {this.props.userStore.phone}
              </Input>
            }
            containerStyle={styles.listItemStyle}
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="消息提醒"
            titleStyle={styles.titleStyle}
            containerStyle={styles.listItemStyle}
            rightElement={
              <Switch
                value={this.props.userStore.isNoticeReminder}
                onValueChange={(value: boolean) => {
                  this.props.userStore.isNoticeReminder = value;
                }}
                trackColor={{ false: "white", true: "tomato" }}
              />
            }
          />
          <View style={styles.lineStyle} />
          <ListItem
            title="字体大小"
            titleStyle={styles.titleStyle}
            containerStyle={styles.listItemStyle}
            rightElement={
              <View>
                <Slider
                  value={this.props.userStore.fontSize}
                  minimumValue={10}
                  maximumValue={20}
                  animateTransitions
                  style={{
                    backgroundColor: "transparent",
                    width: 200,
                    height: 40
                  }}
                  step={1}
                  thumbTintColor="tomato"
                  trackStyle={{ width: "100%", height: 2 }}
                  minimumTrackTintColor="tomato"
                  maximumTrackTintColor="#dfdfdf"
                  thumbStyle={{ width: 15, height: 15 }}
                  onValueChange={(sliderValue: number) => {
                    this.props.userStore.fontSize = sliderValue;
                  }}
                />
                <Text
                  style={{
                    fontSize: 12,
                    color: "tomato",
                    marginTop: -10,
                    marginLeft: Math.max(
                      Math.min(
                        ((this.props.userStore.fontSize - 10.0) / 10.0) * 184.0,
                        184.0
                      ),
                      0
                    ),
                    width: 16
                  }}
                >
                  {this.props.userStore.fontSize}
                </Text>
              </View>
            }
          />
          <View style={styles.lineStyle} />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "transparent"
  },
  lineStyle: {
    height: 1,
    backgroundColor: "#EFEFEF"
  },
  titleStyle: {
    color: "#333"
  },
  listItemStyle: {
    height: 60
  }
});
